<template>
  <div class="bigbox">
    <div class="get-up-container">
      <div class="search-bar">
        <div class="title">走起</div>
        <div class="search-btn" @click="$router.push('/search')">
          <img src="@/assets/goImages/5y.png" />
        </div>
      </div>
      <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
        <template #content>
          <div class="banner-box">
            <div class="banner" v-for="b in data[0]" :key="b.id" @click="jump_detail(b.jump_url)">
              <img :class="data[0].length == 1 ? 'only' : 'img'" :src="b.cover_url" />
            </div>
          </div>

          <div class="list">
            <div class="content" @click="toActivity(t.title)" v-for="t in text[0]" :key="t.id">
              <div><img class="auto-img" :src="t.cover_url" /></div>
              <div>{{ t.title }}</div>
            </div>
          </div>
          <img class="banner-img" v-for="i in banner[0]" :key="i.id" :src="i.cover_url" @click="$router.push('/feeds/' + i.id)" />

          <div class="list-item">
            <div class="exhibition" v-for="e in list" :key="e.title.id">
              <div class="box-king">
                <div class="king-content">
                  <img class="king" v-if="e.title.cover_url" :src="e.title.cover_url" />
                  <div class="title">{{ e.title.title }}热度榜</div>
                </div>
                <div class="all">
                  <div class="count" @click="clickall(e.title.title)">全部</div>
                  <img class="arrow" src="@/assets/goImages/L0.png" alt="" />
                </div>
              </div>
              <div v-for="a in e.data" :key="a.id" @click="$router.push('/feeds/' + a.id)">
                <div class="box-item">
                  <div><img class="pic" :src="a.cover_url" /></div>
                  <div class="content-item">
                    <span class="title">{{ a.title }}</span>
                    <span class="desc">{{ a.desc }}</span>
                    <span class="address">{{ a.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-list-box">
            <div class="tag">
              <span class="tj" @click="clickChange">{{ name }}</span>
              <img class="down-arrow" src="../assets/arrow/2i1.png" alt="" />
            </div>
            <div class="linear"></div>

            <div class="list-item" v-show="change">
              <div v-for="t in tag[0]" :key="t.id" @click="changeColor(t.id, t.display_name, t.name)" class="displayName" :class="index == t.id ? 'active' : ''">{{ t.display_name }}</div>
            </div>
          </div>
        </template>
        <template #list>
          <div class="figure-box">
            <div class="figure" v-for="(f, index) in figure" :key="index" @click="goDynamic(f.pics[0].gif_url, f.id)">
              <img class="figure-img" v-lazy="f.pics[0].gif_url ? f.pics[0].gif_url : f.pics[0].url" />
              <div class="figure-title">{{ f.title }}</div>
              <div class="figure-item-box">
                <img class="figure-icon" src="../assets/goImages/dY.png" />
                <div class="city-name">{{ f.business && f.business.city }}.{{ f.business && f.business.name }}</div>
              </div>
              <div class="avatar-box">
                <div class="avatar-all">
                  <img class="avatar_thumbnail" :src="f.send_user.avatar_thumbnail" />
                  <img v-if="f.send_user.account_icon_url" class="account_icon_url" :src="f.send_user.account_icon_url" />

                  <div class="avatar_name">{{ f.send_user.name }}</div>
                </div>
                <div class="like-box">
                  <div class="like-heart" @click.stop="changeHeart(f)">
                    <img v-if="f.heart" class="heart-icon" src="@/assets/goImages/1t.png" />
                    <img v-else class="heart-icon" src="@/assets/goImages/AJ.png" />
                  </div>
                  <span class="like_count">{{ f.like_count }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </refresh-list>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/request'
import { bus } from '@/utils/bus/bus.js'
import RefreshList from '@/components/activity/public-component/RefreshList.vue'
import { changeRedheart } from '@/utils/fabulous/index'
export default {
  components: {
    RefreshList
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      title: '',
      data: [],
      text: [],
      list: [],
      tag: [],
      page: 1,
      banner: [],
      figure: [],
      index: 7,
      name: '推荐',
      englishName: 'tuijian',
      change: false,
      actIndex: 0
    }
  },
  methods: {
    // 请求轮播图
    async RequestResources() {
      const res = await axios.get('/v2/home_operations')
      if (res.length == 3) {
        this.data.push(res[0].banners)
        this.text.push(res[1].banners)
        const leftData = await axios.get('/v2/rank_items?rank_id=1')
        const rightData = await axios.get('/v2/rank_items?rank_id=6')
        const text = res[2].banners
        text.forEach((item, index) => {
          let data = null
          if (index == 0) {
            data = { title: item, data: leftData }
          } else {
            data = { title: item, data: rightData }
          }
          this.list.push(data)
        })
      } else if (res.length == 4) {
        this.data.push(res[0].banners)
        this.text.push(res[1].banners)
        this.banner.push(res[2].banners)
        const leftData = await axios.get('/v2/rank_items?rank_id=1')
        const rightData = await axios.get('/v2/rank_items?rank_id=6')
        const text = res[3].banners
        text.forEach((item, index) => {
          let data = null
          if (index == 0) {
            data = { title: item, data: leftData }
          } else {
            data = { title: item, data: rightData }
          }
          this.list.push(data)
        })
      }
    },
    async RequestList() {
      const ListTag = await axios.get('/v2/post/categories')
      this.tag.push(ListTag)
    },
    async RequestFigure() {
      const figure = await axios.get(`/v2/posts`, {
        params: {
          category: this.englishName,
          page: this.page
        }
      })
      if (figure.length > 0) {
        this.page++
        this.figure = [...this.figure, ...figure]
        this.status.isLoading = false
        this.status.loading = false
      } else {
        this.status.finished = true
      }
    },
    changeColor(id, display_name, name) {
      this.index = id
      this.name = display_name
      this.change = false
      this.englishName = name
      this.figure = this.figure.filter((f) => f.name == name)
    },
    clickChange() {
      this.change = true
    },
    toActivity(title) {
      console.log(title)
      switch (title) {
        case '展览':
          this.actIndex = 1
          break
        case 'Live现场':
          this.actIndex = 3
          break
        case '话剧演出':
          this.actIndex = 2
          break
        case '景点门票':
          this.actIndex = 5
          break
      }
      this.$router.push('/activity')
    },
    clickall(title) {
      if (title == '展览') {
        this.$router.push('/host')
      } else {
        this.$router.push('/drama')
      }
    },
    goDynamic(pic, id) {
      if (pic) {
        this.$router.push('/video/' + id)
      } else {
        this.$router.push('/dynamic/' + id)
      }
    },
    changeHeart(f) {
      let thisSet = this.$set
      changeRedheart(f, thisSet)
    },
    // 跳转到轮播图详情页
    jump_detail(val) {
      const re = /[\/|?](id=)?(\d+)[?|&]/gi
      re.test(val)
      const id = RegExp.$2
      if (RegExp.$1) {
        this.$router.push('/bannerdetail/' + id)
      } else {
        this.$router.push('/feeds/' + id)
      }
    },
    // 下拉刷新
    async onRefresh() {
      ;(this.data = []), (this.text = []), (this.list = []), (this.tag = []), (this.page = 1), (this.banner = []), (this.figure = []), (this.page = 1)
      await this.sendRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.RequestFigure()
      this.status.loading = false
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      this.RequestResources()
      this.RequestList()
      await this.RequestFigure()
      Toast.clear()
    }
  },
  created() {
    this.sendRequest()
  },
  watch: {
    englishName() {
      this.RequestFigure()
    }
  },
  beforeDestroy() {
    bus.$emit('send-title', this.actIndex)
  }
}
</script>
<style lang="less" scoped>
.bigbox {
  padding-top: 46px;

  .get-up-container {
    padding-bottom: 46px;
  }
  .search-bar {
    padding: 10px 15px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #d94648;
    line-height: 22px;
    display: flex;
    height: 46px;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 18px;
      color: #fff;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;

      img {
        height: 30px;
        width: 30px;
      }

      span {
        color: #fff;
        font-size: 14px;
        margin-left: 3px;
      }
    }
  }

  .banner-box {
    display: flex;
    width: 100%;
    overflow: auto;
    padding: 0 6px;

    .banner {
      margin: 5px 3px 0;

      .img {
        display: block;
        width: 341px;
      }

      .only {
        width: 100%;
        display: block;
      }
    }
  }

  .list {
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    font-size: 14px;
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .auto-img {
        width: 40px;
        height: 40px;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }

  .banner-img {
    width: 100%;
    height: 100%;
    padding: 20px 10px 0;
    display: block;
  }

  .list-item {
    display: flex;
    overflow: auto;
    margin-top: 30px;

    .exhibition {
      border: 1px solid #ddd;
      margin-left: 10px;
      border-radius: 5px;
      padding-bottom: 10px;
      margin-right: 10px;

      .box-king {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 15px;

        .title {
          font-weight: bold;
          font-size: 20px;
        }

        .all {
          display: flex;
          align-items: center;
          margin-left: 15px;

          .arrow {
            width: 14px;
            height: 14px;
            margin-left: 3px;
          }
          .count {
            font-size: 14px;
            color: rgb(178, 178, 178);
          }
        }

        .king-content {
          display: flex;
          align-items: center;

          .king {
            width: 24px;
            height: 20px;
            margin-right: 10px;
          }
        }
      }
    }
    .box-item {
      display: flex;
      width: 230px;
      margin-top: 15px;
      margin-left: 7px;
      .pic {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
      .content-item {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        justify-content: space-around;
        font-size: 12px;

        .title {
          font-size: 13px;
          max-width: 140px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .desc {
          color: rgb(178, 178, 178);
          max-width: 140px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .address {
          color: rgb(178, 178, 178);
          max-width: 140px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .content-list-box {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    position: relative;

    .tag {
      background-color: white;
      width: 84px;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;

      .down-arrow {
        width: 12px;
        margin-left: 5px;
      }
    }

    .linear {
      position: absolute;
      top: 5px;
      z-index: -1;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #ddd;
    }

    .list-item {
      width: 300px;
      height: 200px;
      border-radius: 10px;
      background-color: white;
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      margin: 0 auto;

      .displayName {
        width: 26%;
        height: 30px;
        border: 1px solid #777;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .active {
        border: 1px solid red;
        color: red;
      }
    }
  }
  .figure-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 20px;

    .figure {
      width: 176px;
      margin-left: 9px;
      margin-bottom: 17px;

      .figure-img {
        display: block;
        width: 170px;
        height: 200px;
        border-radius: 5px;
      }

      .figure-title {
        margin-left: 5px;
        margin-top: 5px;
        font-weight: bold;
        font-size: 13px;
      }
      .figure-item-box {
        display: flex;
        margin-top: 5px;
        margin-left: 5px;

        .figure-icon {
          width: 14px;
          height: 14px;
        }
        .city-name {
          margin-left: 8px;
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 130px;
        }
      }
      .avatar-box {
        margin-top: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .avatar-all {
          display: flex;
          align-items: center;
          flex: 1;
          margin-left: 5px;
          position: relative;

          .account_icon_url {
            position: absolute;
            left: 14px;
            top: -2px;
            width: 10px;
            height: 10px;
          }

          .avatar_thumbnail {
            width: 20px;
            height: 20px;
          }

          .avatar_name {
            font-size: 12px;
            margin-left: 8px;
          }
        }

        .like-box {
          display: flex;
          .like-heart {
            width: 16px;
            height: 14px;
            margin-right: 5px;

            .heart-icon {
              width: 100%;
              height: 100%;
              display: block;
              margin-right: 5px;
            }
          }
          .like_count {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
